<template>
  <div style="width: 930px; margin: 0 auto">
    <h1 style="text-align: center;font-weight: 600;font-size: 20px;">新聘任审评员实习审评评定表</h1>
    <table style="width: 930px" id="table-1">
      <tr>
        <td class="title">姓名</td>
        <td>{{ model.ybkp.fjcyxm }}</td>
        <td class="title">工作单位</td>
        <td colspan="3">{{ model.ybkp.fgzdw }}</td>
      </tr>
      <tr>
        <td class="title">审评组长</td>
        <td>{{ model.ybkp.fzzxm }}</td>
        <!-- <td class="title">承担审评任务</td>
        <td>{{ model.ybkp.fcdjcrw }}</td> -->
        <td class="title">审评类别</td>
        <td>{{ model.ybkp.fjclx }}</td>
      </tr>
      <tr>
        <td class="title">审评范围(品种名称)</td>
        <td class="td" colspan="3">{{ model.ybkp.fgzdw }}</td>
      </tr>
      <tr>
        <td class="title">审评时间</td>
        <td class="td" colspan="3">{{ model.ybkp.fjcsj }}</td>
      </tr>
      <tr class="tr">
        <td class="title">审评单位</td>
        <td class="td" colspan="3">{{ model.ybkp.fqymc }}</td>
      </tr>

      <tr>
        <!-- <td
          colspan="6"
          class="vertical"
          style="margin: 0 !important; padding: 10 !important; height: 100px"
        > -->
          <td class="title">
            <span style="color: #ff4d4f; line-height: 2;" v-if="!crewDisabled">*</span>承担审评任务</td>
          <td colspan="3">
            <!-- <quill-editor
              v-if="!crewDisabled"
              v-model="formData.fcdjcrw"
              ref="myQuillEditor"
              :options="editorOption"
              >
            </quill-editor> -->
            <a-textarea v-if="!crewDisabled && !view"  v-model="formData.fcdjcrw" placeholder="请输入承担审评任务:(200字以内)" :maxLength="200" :auto-size="{ minRows: 3}"/>
            <p v-else class="ql-editor">{{formData.fcdjcrw}}</p>
            <!-- <ych-editor
              v-model="formData.fcdjcrw"
              :disabled="crewDisabled"
              :height="150"
            ></ych-editor> -->
          </td>
        <!-- </td> -->
      </tr>
      <tr>
        <!-- <td
          colspan="6"
          class="vertical"
          style="margin: 0 !important; padding: 10 !important; height: 200px;"
        >
          <p style="display: flex;align-content: center;padding: 0px 0px 0px 0px;margin-bottom: 0;"> -->
          <td class="title">
            <span style="color: #ff4d4f; line-height: 2;" v-if="!crewDisabled">*</span>实习审评员总结
          </td>
          <td colspan="3">
            <quill-editor
              v-if="!crewDisabled && !view"
              v-model="formData.fsxjcyzj"
              ref="myQuillEditor"
              :options="editorOption"
              >
              <!-- @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
              @change="onEditorChange($event)" -->
            </quill-editor>
            <div v-else v-html="formData.fsxjcyzj" class="ql-editor"></div>
            <!-- <ych-editor
              v-model="formData.fsxjcyzj"
              :disabled="crewDisabled"
              :height="600"
            ></ych-editor> -->
          </td>
        <!-- </td> -->
      </tr>
      <!-- {{crewDisabled}}{{!groupDisabled}} -->
        <!-- {{crewDisabled}}{{!groupDisabled}} 1.false,false 不出现-->
      <tr v-if="crewDisabled || !groupDisabled || view">
        <!-- <td
          class="vertical"
          colspan="6"
          style="margin: 0 !important; padding: 10 !important; max-height: 200px"
        >
        <p style="display: flex;align-content: center;"> -->
        <td class="title">
          <span style="color: #ff4d4f; line-height: 2;" v-if="!groupDisabled && !view">*</span>审评组长对本审评员的总体概论<br/>(优点和缺点，不能只提优点)
        </td>
          <td colspan="3" class="input_bor_no">
            <!-- <quill-editor
              v-if="!groupDisabled"
              v-model="formData.fzzyj"
              ref="myQuillEditor"
              :options="editorOption"
              >
            </quill-editor> -->
            <a-textarea v-if="!groupDisabled && !view"  v-model="formData.fzzyj" placeholder="请输入审评组长对本审评员的总体概论：" :maxLength="200" :auto-size="{ minRows: 3}"/>
            <div v-else v-html="formData.fzzyj" class="ql-editor"></div>
            <!-- <ych-editor
              v-model="formData.fzzyj"
              :disabled="groupDisabled"
            ></ych-editor> -->
          </td>
          <!-- <div style="text-align: right; height: 50px; margin-right: 150px">
            签名:<a-input
              :disabled="groupDisabled"
              class="input_bor_no"
              v-model="formData.fzzxm"
              style="width: 120px"
            ></a-input>
          </div> -->
        <!-- </td> -->
      </tr>
      <tr v-if="crewDisabled || !groupDisabled">
        <!-- <td
          colspan="6"
          style="margin: 0 !important; padding: 10 !important; min-height: 100px"
        >
        <span style="display: flex;align-content: center;">
          <span style="color: #ff4d4f; line-height: 2;" v-if="!groupDisabled && !view">*</span>
          评定等级：</span>

          <ych-multi-select-tag
            v-if="!view"
            v-model="formData.fpj"
            :disabled="groupDisabled"
            :type="'checkbox'"
            dictCode="pddj001"
          />
          <span v-else style="padding-left: 80px;">{{formData.fpj}}</span>
        </td> -->
        <td class="title">
          <span style="color: #ff4d4f; line-height: 2;" v-if="!groupDisabled && !view">*</span>
          考核结果建议
        </td>
        <td colspan="3">
          <a-radio-group
            name="radioGroup"
            v-if="!view && !groupDisabled"
            v-model="formData.fpj"
            :disabled="groupDisabled">
            <a-radio value="优秀">
              优秀
            </a-radio>
            <a-radio value="合格">
              合格
            </a-radio>
            <a-radio value="不合格">
              不合格
            </a-radio>
          </a-radio-group>
          <!-- <ych-multi-select-tag
            v-if="!view"
            v-model="formData.ftjpj"
            :disabled="groupDisabled"
            :type="'checkbox'"
            dictCode="pddj001"
          /> -->
          <span v-else style="padding-left: 15px;">{{formData.fpj}}</span>
        </td>
      </tr>
      <tr v-if="model.job.fthyj">
        <td class="title">退回意见</td>
        <td
          colspan="5"
          style="margin: 0 !important; padding: 10 !important; min-height: 100px"
        >
          <!-- <a-textarea
            v-model="formData.opinion"
            @focus="visabled = true"
          ></a-textarea> -->
          {{ model.job.fthyj }}
        </td>
      </tr>
      <tr v-if="crewDisabled && groupDisabled">
        <!-- <td class="title"><span style="color: #ff4d4f; line-height: 2;" v-if="crewDisabled && groupDisabled">*</span>办理意见</td> -->
        <td class="title">办理意见</td>
        <td
          v-if="!view"
          colspan="3"
          style="margin: 0 !important; padding: 10 !important; min-height: 100px"
        >
          <a-textarea
            v-model="formData.opinion"
            :maxLength="200"
            placeholder="请输入办理意见：(200字以内)"
            :auto-size="{ minRows: 3}"
          ></a-textarea>
        </td>
        <td v-else colspan="5">{{formData.opinion}}</td>
      </tr>
      <!-- <tr v-if="crewDisabled && groupDisabled">
        <td class="title">考核结果确认</td>
        <td colspan="3">
          <a-radio-group
            name="radioGroup"
            v-if="!view"
            v-model="formData.fpj"
            :disabled="!groupDisabled">
            <a-radio value="优秀">
              优秀
            </a-radio>
            <a-radio value="合格">
              合格
            </a-radio>
            <a-radio value="不合格">
              不合格
            </a-radio>
          </a-radio-group>
          <span v-else style="padding-left: 80px;">{{formData.fpj}}</span>
        </td>
      </tr> -->
      <tr v-if="!view && formData.dbrid">
        <td
          colspan="6"
          style="margin: 0 !important; padding: 10 !important; min-height: 100px"
        >
          <div style="display: flex;padding: 20px;">
            <div>
              <span>待办人：</span>
              <a-radio-group name="radioGroup" v-model="formData.dbrid">
                <a-radio
                  v-for="d in model.nextNodeDbrList"
                  :key="d.dbrid"
                  :value="d.dbrid"
                >
                  {{ d.dbr }}
                </a-radio></a-radio-group
              >
            </div>
            <div>
              是否发送短信：<a-checkbox v-model="smgflagIs"></a-checkbox>
            </div>
          </div>
        </td>
      </tr>
    </table>
    <vxe-modal
      v-model="visabled"
      width="50vw"
      height="70vh"
      title="选择意见"
      :destroy-on-close="true"
    >
      <template #default>
        <opinion type="日常考评" @change="handlerOpinion"></opinion>
      </template>
    </vxe-modal>
  </div>
</template>
<!-- fyzzyj -->
<script>
import { quillEditor } from 'vue-quill-editor'
import YchMultiSelectTag from "@/components/dict/YchMultiSelectTag";
import YchEditor from "../../../components/ych/YchEditor.vue";
import { throttle } from "../utils/utils";
import Opinion from "../components/opinion.vue";
export default {
  name: "SpcyWebui319EvaluationForm",
  components: { YchMultiSelectTag, YchEditor, Opinion },
  props: {
    model: {
      type: Object,
      default: {  },
    },
    jobid: {
      type: String,
      default: "",
    },
    ybid: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "",
    },
    change: {
      type: Function,
    },
    view: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      groupDisabled: true,
      crewDisabled: true,
      formData: {
        fcdjcrw:'',
        fsxjcyzj: "",
        fzzyj: "",
        fzzxm: "",
        dbrid: "",
        opinion: "",
        smgflag: "否",
        ftjpj: '',
        fpj: "",
      },
      smgflagIs: false,
      visabled: false,
      nextNodeDbrList:[],
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'direction': 'rtl' }], // 文本方向
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
            [{ 'font': [false, 'heiti', 'songti', 'kaiti', 'lishu', 'arial', 'monospace'] }], // 字体
            [{ 'align': [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image', 'video'] // 上传图片、上传视频
          ]
        }
      },
    };
  },

  mounted() {
    //console.log(this.ybkp);
  },
  computed: {
    ybkp() {
      const { ybkp } = this.model;
      //console.log(ybkp);
      return ybkp || null;
    },
    // 当前富文本实例
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  methods: {
    handlerOpinion(value) {
      this.formData.opinion = value;
    },
  },
  watch: {
    smgflagIs() {
      if (this.smgflagIs) {
        this.formData.smgflag = "是";
      } else {
        this.formData.smgflag = "否";
      }
    },
    model: {
      deep: true,
      immediate: true,
      handler() {
        //console.log('this.model--',this.model,)
        if (Object.keys(this.model).length) {
          const { ybkp, nextNodeDbrList } = this.model;
          if(this.model.job){
            this.type = this.model.job.fhjmc
          }
          if (!this.formData.dbrid) {
            if (nextNodeDbrList instanceof Array && nextNodeDbrList.length) {
              this.formData.dbrid = this.model.nextNodeDbrList[0].dbrid;
            }
          }
          if (ybkp) {
            this.formData = { ...this.formData, ...ybkp };
          }
          if (this.change) {
            throttle(() => {
              this.change(this.formData);
            });
          }
        }
      },
    },
    "model.nextNodeDbrList": {
      deep: true,
      immediate: true,
      handler() {
        if (!this.formData.dbrid) {
          const { nextNodeDbrList } = this.model;
          if (nextNodeDbrList instanceof Array && nextNodeDbrList.length) {
            this.formData.dbrid = this.model.nextNodeDbrList[0].dbrid;
          }
        }
      },
    },
    type: {
      immediate: true,
      handler() {
        //console.log('this.type---',this.type)
        //console.log('view---',this.view)
        if (this.type.indexOf("个人总结") !== -1) {
          this.crewDisabled = false;
          this.groupDisabled = true;
        } else if (this.type.indexOf("组长评价") !== -1) {
          this.crewDisabled = true;
          this.groupDisabled = false;
        } else if (this.type.indexOf("经办人审核") !== -1) {
          this.crewDisabled = true;
          this.groupDisabled = true;
        }
        //console.log('this.crewDisabled---',this.crewDisabled)
      },
    },
    formData: {
      deep: true,
      immediate: true,
      handler() {
        if (this.change) {
          throttle(() => {
            this.change(this.formData);
          });
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/table.less");
@import url("../assets/common.less");
.title {
  text-align: center !important;
  width: 191px !important;
  padding: 5px 10px !important;
  background-color: #e6f7ff !important;
  font-weight: 600 !important;
}
td {
  text-align: left !important;
  padding: 0;
  margin: 0;
}
.input {
  border: none;
}
::v-deep .tox .tox-statusbar {
  display: none !important;
}
::v-deep .tox .tox-toolbar {
  display: none !important;
}
.tr {
  .td {
    width: 350px !important;
  }
}

</style>
<style>
.ql-container {
  min-height: 300px !important;
  font-size: 16px !important;
}
</style>
